<template>
    <div>
      <!--<m-header v-  scroll-header="[0, 70, 200]"></m-header>-->
      <section :style="background.section">
        <div class="wapper">
          <div class="light" :style="background.lightTop">
            <i :style="background.light"></i>
          </div>
          <hr class="line-left">
          <hr class="line-right">
          <main :style="background.lineBg">
            <h1>
              <router-link to="/">微力实验室</router-link>
              <i class="clock" :style="background.clock"></i>
              成员墙
            </h1>
            <!--每一届的成员-->
            <y-members></y-members>
            <y-members></y-members>
            <!--<div style="height: 200px;"></div>-->
          </main>
        </div>
      </section>
    </div>
</template>

<script>
  import MHeader from './MHeader'
  import MinPerson from '../bases/MinPerson'
  import {MinPersonContructor} from '../class/MinPerson'
  import {Bgimg} from "../Bgimg";
  import myAxios from '../http/myAxios'
  import YMembers from '../bases/YearMembers'
  export default {
    name: "members",
    data(){
      return {
        expiration: [ 5, 6, 7, 8],
        allArr: [],//所有数据
        background: {
          section: {
            backgroundImage: `url(${Bgimg.members.section})`
          },
          lightTop: {
            backgroundImage: `url(${Bgimg.members.lightTop})`
          },
          light: {
            backgroundImage: `url(${Bgimg.members.light})`
          },
          clock: {
            backgroundImage: `url(${Bgimg.members.clock})`
          },
          lineBg: {
            backgroundImage: `url(${Bgimg.members.lineBg})`
          },
          circle: {
            backgroundImage: `url(${Bgimg.members.circle})`
          }
        }
      }
    },
    components: {
      MHeader,
      MinPerson,
      YMembers
    },
    async mounted() {
     /* this.personArr.forEach(item => {
        this.arr.push(new MinPersonContructor(item))
      })*/
      let url = '/static/data/members.json'
      let data = await this.$axios.get(url)
      this.allArr = data.data
      // console.log(data.data[0])
    }

  }

</script>

<style scoped lang="stylus">
  @import "../stylus/variable.styl"
  $nav-width = 100px//nav的宽度
  $h1-color = #58a6fb
  $text-color = #ec6a13
  section
    min-height 800px
    display flex
  .wapper
    position relative
    padding-top 70px
    min-width 1200px
    width 75%
    margin 0 auto
  .light
    position absolute
    left 55px
    top 0px
    height 191px
    background no-repeat top center
    width 152px
    i
      position absolute
      top 0
      background no-repeat top center
      width 100%
      height 100%
  hr
    height 0
    border-left none
    border-right 0
    border-top 1px dashed #2d2f34
    border-bottom 1px dashed #474954
  .line-left
    position absolute
    left 0
    width 70px
  .line-right
    position absolute
    right 0
    width 460px
  main
    color $text-color
    background repeat-y 286px 0
    h1
      position relative
      top -50px
      padding-top 0
      margin-left 100px
      color $h1-color
      .clock
        width 40px
        height 40px
        position relative
        top 10px
        margin 0 20px
        background-size cover
        display inline-block
</style>
